/**
 * @intro:  全局公用指令.
 * @author: liyang.
 * @email: 1184785075@qq.com.
 * @Date: 2019/7/26 10:32.
 * @Copyright(©) 2019 by liyang.
 *
 */

;(function(){

const getReference = (el, binding, vnode) => {
  const elWidth = vnode.elm.offsetWidth
  const elHeight = vnode.elm.offsetHeight
  const left = getElementLeft(el)
  const top = getElementTop(el)
  const _ref = binding.expression ? binding.value : binding.arg;
  const popoverEle = vnode.context.$refs[_ref].$refs['hl-dropdown'];
  const placement = vnode.context.$refs[_ref].placement
  const trigger = vnode.context.$refs[_ref].trigger
  const popoverWidth = popoverEle.offsetWidth
  const popoverHeight = popoverEle.offsetHeight

  const position = getPosition({'width':elWidth,'height':elHeight,'left':left,'top':top} , {'width':popoverWidth , 'height':popoverHeight } , placement )

  function setPosition(e){
    // 设置定位
    if (popoverEle) {
      popoverEle.style.left = position.left + 'px'
      popoverEle.style.top = position.top + 'px'
    }

    // e.stopPropagation()
  }

  if(trigger == 'hover'){
    el.addEventListener('mouseenter', setPosition)
    // popoverEle.addEventListener('mouseenter', setPosition)
  }

};

/**
 * 由一固定元素获取另一相对此固定元素的全局定位坐标
 * @param  {object}  { width:100 , height:100 , left: 100 , top: 200 }  固定元素信息
 * @param  {object}  { width:100 , height:100 }  相对元素信息
 * @param  {string}  'top'  相对元素相对固定元素的方位
 * @return {string}
 */
function getPosition(ele1,ele2,placement){
  const gw = ele1.width,
        gh = ele1.height,
        gl = ele1.left,
        gt = ele1.top,
        xw = ele2.width,
        xh = ele2.height,
        margin = 10;
        gasket = 130;

  let xl = null,xt = null;

  switch (placement) {
    case 'top':
      xl = gl - (xw - gw) / 2
      xt = gt - xh - margin - gasket
      break;
    case 'right':
      xl = gl + gw
      xt = gt - (xh - gh) / 2 - gasket
      break;
    case 'bottom':
      xl = gl - (xw - gw) / 2
      xt = gt + gh - gasket
      break;
    case 'left':
      xl = gl - xw - margin
      xt = gt - (xh - gh) / 2 - gasket
      break;
    default:

  }

  return {
    'left':xl,
    'top':xt
  }
}

function getElementLeft(element) {　　　　
  var actualLeft = element.offsetLeft;　　　　
  var current = element.offsetParent;
　　　　
  while (current !== null) {　　　　　　
    actualLeft += current.offsetLeft;　　　　　　
    current = current.offsetParent;　　　　
  }
  　　　　
  return actualLeft;　　
}
　　
function getElementTop(element) {　　　　
  var actualTop = element.offsetTop;　　　　
  var current = element.offsetParent;
　　　　
  while (current !== null) {　　　　　　
    actualTop += current.offsetTop;　　　　　　
    current = current.offsetParent;　　　　
  }
  　　　　
  return actualTop;　　
}

Vue.directive('dropdown', {
  // bind(el, binding, vnode) {
  //   getReference(el, binding, vnode)
  // },
  inserted(el, binding, vnode) {
    getReference(el, binding, vnode)
  }
})

}())
